<template>
	<view class="container">
		<view class="time_out">
			{{n_timeOut}}
		</view>
		<view class="default">
			<view class="default_left">
				<view class="default_name">
					<view class="default_name_name">
						{{detail.order_address.name}}
					</view>
					<view class="default_name_phone">
						{{detail.order_address.telephone}}
					</view>
				</view>
				<view class="default_detail">
					{{detail.order_address.province_code}}{{detail.order_address.city_code}}{{detail.order_address.area_code}}{{detail.order_address.address}}
				</view>
			</view>
			<view class="default_right">
				<text class="iconfont icon-enter"></text>
			</view>
		</view>
		<view class="product">
			<view class="product_list" v-for="(item,index) in detail.order_product">
				<view class="product_admin">
					{{item.product_additional.admin_name}}的店铺 <text class="iconfont icon-enter"></text>
				</view>
				<view class="product_detail" @tap.stop="navTo('../product/index?_id=' + item.product_id)">
					<view class="product_detail_image">
						<image :src="item.product_title_image" mode="scaleToFill"></image>
					</view>
					<view class="product_detail_detail">
						<view class="product_detail_detail_name">
							{{item.product_name}}
						</view>
						<view class="product_detail_detail_sku">
							{{item.product_option.list0_name}},{{item.product_option.list1_name}}
						</view>
						<view class="product_detail_detail_num">
							<text>￥{{parseFloat(item.product_price).toFixed(2)}}</text> <span>x</span> <text>{{item.product_number}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tab_list">
			<view class="tabs_message">
				<view class="tabs_message_title">
					优惠券
				</view>
				<view class="tabs_message_number">
					<text class="price">-￥{{coupon_price.toFixed(2)}}</text>
					<!-- <text class="iconfont icon-enter"></text> -->
				</view>
			</view>
			<view class="tabs_message">
				<view class="tabs_message_title">
					赠送积分
				</view>
				<view class="tabs_message_number">
					<text class="integral">{{pay_count.toFixed(2)}}</text>
					<!-- <text class="iconfont icon-enter"></text> -->
				</view>
			</view>
		</view>
		<view class="tab_submit">
			<view class="tab_submit_price">
				<view class="tab_submit_price_delete">
					优惠金额: ￥{{coupon_price.toFixed(2)}}元
				</view>
				<view class="tab_submit_price_cancel">
					实付金额：￥{{(pay_count - coupon_price).toFixed(2)}}
				</view>
			</view>
			<view class="tab_submit_btn">
				<button v-if="detail.status == 0" type="default" @tap.stop="pay_list()">去支付</button>
				<button v-else type="default" @tap.stop="backHome()">返回</button>
			</view>
		</view>
	</view>
</template>
<!-- n_timeOut -->
<script>
	import api from '@/comon/api.js'
	export default {
		data(){
			return {
				order_id: 0,
				detail: {
					order_address:{}
				},
				address_list: {name: '--',telephone: '--',province_code:'--------'},
				pay_count: 0,
				coupon_price: 0,
				pay_status: true,
				n_timeOut: '---------'
			}
		},
		onLoad(option) {
			uni.showLoading({
				title:'正在加载订单详情'
			})
			this.order_id = option.id;
			this.order_load();
		},
		methods:{
			async order_load(){
				let res = await api.uniCloudApi(api.publicFun.order,{
					order_type: 1,
					order_id: this.order_id
				});
				this.detail = res[0];
				console.log(res)
				if(res){
					this.pay_count_price();
					if(this.detail.status != 0){
						this.or_status(this.detail.status)
					}else {
						this.count_time(res[0])
					}
				}
			},
			// 计算应付总价格
			pay_count_price(){
				this.pay_count = 0;
				for(let i in this.detail.order_product){
					this.pay_count += (parseFloat(this.detail.order_product[i].product_price) * parseInt(this.detail.order_product[i].product_number))
				}
				uni.hideLoading()
			},
			// 计算当前订单状态
			count_time(res){
				let n_time = new Date().getTime();
				if(n_time >= res.end_time){
					uni.showToast({
						icon:'none',
						title:'订单已关闭,请重新下单'
					})
					this.pay_status = false;
					this.n_timeOut = '订单已关闭';
				}else{
					let that = this;
					let times =(res.end_time - n_time) / 1000;
					let inval = setInterval(() => {
						if(times <= 0){
							clearInterval(inval);
							that.n_timeOut = '订单已关闭';
						}
						times -= 1;
						let hh = parseInt(times / 3600); //小时
						let shh = times - hh * 3600;
						let ii = parseInt(shh/60);
						let ss = parseInt(shh - ii * 60);
						that.n_timeOut = `订单剩余支付时间:${(hh < 10 ? '0'+hh : hh)}时${(ii < 10 ? '0'+ii : ii)}分${(ss < 10 ? '0'+ss : ss)}秒`;
					},1000)
				}
			},
			// 得出当前订单状态
			or_status(status){
				let str = '';
				switch (status){
					case 0:
						str="订单用户待支付";
						break;
					case 1:
						str="用户已付款,待商家发货";
						break;
					case 2:
						str="订单待用户收货";
						break;
					case 3:
						str="订单待用户评价";
						break;
					case 4:
						str="订单商家退款中";
						break;
					case 5:
						str="订单售后平台处理中";
						break;
					case 6:
						str="订单已完成";
						break;
					default :
						str="订单已关闭"
						break;
				}
				this.n_timeOut = str;
			},
			async pay_list(){
				let order_id = this.order_id;
				let that = this;
				uni.showLoading({
					title:'正在获取支付参数'
				})
				let res = await api.uniCloudApi(api.publicFun.order,{order_type: 12,order_id: order_id});
				if(res.length > 0){
					let arr = [];
					for(let i in res){
						arr.push(res[i].pay_name)
					}
					uni.hideLoading()
					uni.showActionSheet({
						itemList: arr,
						complete(e) {
							that.pay_num(order_id,e,res)
						}
					});
				}else {
					uni.hideLoading();
					uni.showToast({
						icon:'none',
						title:JSON.stringify(res)
					})
				}
			},
			async pay_num(order_id,e,res){
				if(e.errMsg == "showActionSheet:ok"){
					switch(res[e.tapIndex].pay_type){
						case 0:
							this.isWeixin(order_id);
							break;
						case 1:
							this.isBalance(order_id);
							break;
						case 2:
							this.isAliPay(order_id);
							break;
						default:
							uni.showToast({icon:'none',title:'未开发'})
							break;
					}
				}else {
					uni.showToast({icon:'none',title:'未完成支付'})
				}
			},
			async isWeixin(order_id){
				uni.showLoading({
					title:'正在拉起支付'
				})
				let that = this;
				let res = await api.uniCloudApi(api.publicFun.order, {order_type: 11,order_id: order_id});
				if(res){
					uni.hideLoading()
					uni.requestPayment({
						provider:'wxpay',
						orderInfo:res,
						complete(e) {
							uni.showToast({icon:'none',title:JSON.stringify(e)})
							that.redTo('detail_order?id=' + order_id);
						}
					})
				}else {
					uni.hideLoading()
				}
			},
			async isBalance(order_id){
				uni.showLoading({title:'正在拉起余额支付'})
				let that = this;
				let res = await api.uniCloudApi(api.publicFun.order,{order_type: 10,order_id: order_id})
				if(res.msg){
					uni.hideLoading()
					uni.showToast({icon:'none',title:res.msg})
					that.redTo('detail_order?id=' + order_id);
				}else {
					uni.hideLoading();
					if(res.updated == 1){
						uni.showToast({icon:'none',title:"支付成功"})
						that.redTo('detail_order?id=' + order_id);
					}
				}
			},
			async isAliPay(order_id){
				let that = this;
				let res = await api.uniCloudApi(api.publicFun.order,{order_type: 9,order_id: order_id})
				if(res.indexOf('app_id') != -1){
					uni.requestPayment({
						orderInfo:res,
						provider:'alipay',
						success() {
							uni.showToast({icon:'none',title:'支付成功'});
							setTimeout(() => {
								that.redTo('detail_order?id=' + order_id);
							},1500)
						},
						fail() {
							that.redTo('detail_order?id=' + order_id);
						}
					})
				}
			},
			redTo(url){
				uni.redirectTo({
					url:url
				})
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			backHome(){
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss">
	.time_out{
		background-color: $uni-back-color;
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 31rpx;
	}
	.default{
		width: 95%;
		padding: 1.5% 2.5%;
		border-bottom: 5px solid #f9f9f9;
		display: flex;
		.default_left{
			width: 90%;
			.default_name{
				display: flex;
				font-weight: bold;
				view{
					width: 50%;
					height: 50rpx;
					line-height: 50rpx;
				}
			}
			.default_detail{
				margin: 7rpx 0;
				line-height: 30rpx;
				font-size: 25rpx;
				color: #828282;
			}
		}
		.default_right{
			width: 10%;
			line-height: 110rpx;
			text-align: center;
		}
	}
	.product{
		width: 100%;
		.product_list{
			width: 95%;
			padding: 1% 2.5%;
			border-bottom: 1px solid #f5f5f5;
			.product_admin{
				font-weight: bold;
				font-family: '楷体';
				font-size: 28rpx;
				color: #007AFF;
			}
			.product_detail{
				width: 100%;
				display: flex;
				margin: 10rpx 0;
				.product_detail_image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 5rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 5rpx;
					}
				}
				.product_detail_detail{
					width: calc(100% - 150rpx);
					padding: 0 15rpx;
					.product_detail_detail_name{
						height: 32rpx;
						line-height: 32rpx;
						overflow: hidden;
						color: #333333;
						font-size: 23rpx;
						font-weight: bold;
					}
					.product_detail_detail_sku{
						height: 45rpx;
						line-height: 45rpx;
						font-size: 21rpx;
						color: #6D6D72;
					}
					.product_detail_detail_num{
						height: 43rpx;
						line-height: 43rpx;
						text-align: right;
						color: $uni-back-color;
						text{
							font-size: 29rpx;
						}
						span{
							margin: 0 5px;
						}
					}
				}
			}
		}
	}
	.tab_list{
		width: 100%;
		margin-top: 50rpx;
		border-top: 1px solid #fafafa;
		.tabs_message{
			width: 95%;
			padding: 0 2.5%;
			height: 40px;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			.tabs_message_title{
				line-height: 40px;
				width: 70%;
			}
			.tabs_message_number{
				line-height: 40px;
				width: 30%;
				text-align: right;
				.price{
					color: $uni-back-color;
				}
				.integral{
					color: #007AFF;
				}
			}
			&:active{
				background-color: #f5f5f5;
			}
		}
	}
	.tab_submit{
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: 44px;
		border-top: 1px solid #f5f5f5;
		display: flex;
		.tab_submit_price{
			width: 60%;
			padding: 0 5%;
			color: $uni-back-color;
			line-height: 44px;
			text-align: right;
			.tab_submit_price_delete{
				line-height: 17px;
				font-size: 17rpx;
			}
			.tab_submit_price_cancel{
				line-height: 27px;
				font-weight: bold;
				font-size: 31rpx;
			}
		}
		.tab_submit_btn{
			width: 30%;
			button{
				border-radius: 0;
				border: 0;
				background-color: $uni-back-color;
				color: #FFFFFF;
				&::after{
					border-radius: 0;
					border: 0;
				}
				&:active{
					background-color: #ca0707;
				}
			}
		}
	}
</style>
